<template>
    <el-card shadow="always">
        <template #header>
            <div>
                <span>商品添加</span>
            </div>
        </template>
        <!-- card body -->
        <p>手动上传</p>
        <el-upload list-type="picture-card" :auto-upload="false" :on-change="uploadProductImg">
            <el-icon>
                <Plus />
            </el-icon>
        </el-upload>
        <hr>
        <p>全自动化</p>
        <el-upload list-type="picture-card" :action="uploadUrl" name="file" :on-success="onSuccess" :on-error="onError"
            :headers="{ Authorization: $store.state.token }" :on-progress="testAaa">
            <el-icon>
                <Plus />
            </el-icon>
        </el-upload>
        <hr>
        <p>半自动化</p>
        <el-upload list-type="picture-card" v-model:file-list="fileList" :http-request="uploadFileTest">
            <el-icon>
                <Plus />
            </el-icon>
        </el-upload>
        <hr>
        <!-- quill 编辑的官网 https://vueup.github.io/vue-quill/guide/installation.html -->
        <!-- vue3 quill 组件  https://vueup.github.io/vue-quill/api/#placeholder -->
        <!-- vue2 quill 组件 https://github.com/surmon-china/vue-quill-editor#readme -->
        <QuillEditor 
            theme="snow" 
            placeholder="请输入商品详情" 
            style="height:500px" 
            content-type="html"
            v-model:content="goodInfo" 
            :toolbar="quillToolBarOptions"
        />
    </el-card>
</template>

<script>
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { QuillEditor } from '@vueup/vue-quill'
import { uploadProductPic } from "@/api/goodsApi.js";
import { ElMessage, ElNotification } from "element-plus";
export default {
    components: {
        QuillEditor,
    },
    data() {
        return {
            uploadUrl: process.env.VUE_APP_REQUEST_URL + 'upload',
            fileList: [],
            goodInfo:"",
            quillToolBarOptions: [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],

                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
                [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
                [{ 'direction': 'rtl' }],                         // text direction

                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],

                ["image"],

                ['clean']                                         // remove formatting button
            ]
        }
    },
    methods: {
        onError() {
            ElMessage.error("网络异常")
        },
        onSuccess(result) {
            console.log(result);
            if (result.meta.status < 400) {
                ElNotification.success({
                    title: "文件上传成功"
                })
            } else {
                ElMessage.error(result.meta.msg)
            }
        },
        testAaa(aaa) {
            console.log(aaa);
        },
        async uploadProductImg(uploadFile, uploadFiles) {
            console.log(uploadFile);
            console.log(uploadFiles);

            let fd = new FormData();
            fd.append("file", uploadFile.raw);

            let result = await uploadProductPic(fd)
            console.log(result);
        },
        async uploadFileTest(uploadFile) {
            // console.log(uploadFile);
            // 1. 构建文件上传需要的二进制文件对象数据
            let fd = new FormData();
            fd.append("file", uploadFile.file);

            // 调用自定义的 axios 上传方法，并提供进度配置
            let result = await uploadProductPic(fd, {
                onUploadProgress: (progressEvent) => {
                    console.log(progressEvent);
                    // 对上传进度对象增加 element ui  组件需要 percent 属性 取值为百分比
                    progressEvent.event.percent = progressEvent.progress * 100
                    uploadFile.onProgress(progressEvent.event)
                }
            });
            // 判断业务是否成功
            if (result === null) {
                // 如果失败。从照片墙中移除上传失败的文件
                this.fileList = this.fileList.filter((file) => {
                    return !(file.uid == uploadFile.file.uid)
                })
            } else {
                // 提示上传成功
                console.log(result);
                ElNotification.success({
                    title: "文件上传成功"
                })
            }
        }
    },
}
</script>

<style lang="scss" scoped></style>